import {Card, Col, Input, Row, Space, Table, Modal, Button, message, Tooltip, Popconfirm, Select} from "antd";
import React from "react";
import JobService from "../service/JobService";
import {
    CaretRightOutlined,
} from "@ant-design/icons";
const {Component} = require("react");
const {Option} = Select

class JobLogList extends Component {
    state = {
        init: 0,
        total:0,
        visible: false,
        logList: [],
        searchCondition:{},
        pagination:{}
    }
    searchCondition = {
        pageNum: 0,
        pageSize: 10
    }
    jobService = new JobService();

    // 定义表格字段
    columns = [
        {
            title: '类名',
            dataIndex: 'jobClassName',
            key: 'jobClassName',
        },
        {
            title: '描述',
            dataIndex: 'description',
            key: 'description',
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
        },
        {
            title: '错误信息',
            dataIndex: 'errorInfo',
            key: 'errorInfo',
        },
        {
            title: '更新时间',
            dataIndex: 'updateTime',
            key: 'updateTime',
        },
        {
            title: '操作',
            key: 'action',
            render: (text, record) => (

                <Space size="middle">
                    <Tooltip title="重试">
                        <Popconfirm title="是否重新执行该任务?"
                                    onConfirm={() => this.retry(record.id)}
                                    okText="确定"
                                    cancelText="取消">
                            <Button shape={"circle"} icon={<CaretRightOutlined/>}/>
                        </Popconfirm>
                    </Tooltip>
                </Space>

            ),
        },
    ];

    /**
     * 生命周期函数，将自身传递给父组件的一个属性
     */
    componentDidMount() {
        this.props.onRef(this)
    }

    /**
     * 显示日志列表对话框，父组件调用
     * @param jobClassName
     */
    showModal(jobClassName) {
        this.search()
        this.setState({
            visible: true
        })
    }

    /**
     * 搜索
     */
    search=()=> {
        this.jobService.getLogList(Object.assign({},this.state.searchCondition, this.searchCondition)).then(resp => {
            const data = resp['data'];
            console.log(data)
            if (data && data['code'] === 0) {
                this.setState({
                    logList: data.data.list,
                    total:data.data.total,
                    pagination: {
                        total: data.data.total,
                    }
                })
            }else{
                message.error(data.message)
            }
        }).catch(err=>{
            message.error("系统错误，请联系管理员")
        })
    }

    /**
     * 重试
     * @param id
     */
    retry(id) {
        this.jobService.retryJobLog(id).then(resp => {
            console.log(resp)
            const result = resp.data
            if (result && result.code===0){
                message.success('执行成功');
                this.search()
            }else{
                message.error(result.message)
            }
        }).catch(err => {
            message.error('执行失败');
            console.log(err)
        })
    }

    /**
     * 隐藏日志列表对话框
     */
    handleCancel = () => {
        this.setState({
            visible: false,
        });
    }
    /**
     * 搜索条件 任务类名变更回调
     * @param e
     */
    jobClassNameChanged=(e)=>{
        let value = e.target.value;
        let searchCondition = Object.assign({}, this.state.searchCondition, {jobClassName: value})
        if (value) {
            this.setState({
                searchCondition: searchCondition
            })
        }
    }
    /**
     * 搜索条件 执行状态变更回调
     * @param value
     */
    statusChanged=(value)=>{
        let searchCondition = Object.assign({}, this.state.searchCondition, {status: value})
        if (value) {
            this.setState({
                searchCondition: searchCondition
            })
        }
    }

    /**
     * 重置搜索条件
     */
    reset=()=>{
        /*setState异步执行，所以可能在值还没有修改完成的时候就会继续执行下面的代码，所以有些时候需要同步执行的代码需要放到回调里*/
        this.setState({
            searchCondition:{}
        },()=>{ this.search()})
    }

    /**
     * table 监控回调，处理分页大小，以及分页编号的变化
     */
    handleTableChange = (pagination, filters, sorter) => {
        this.searchCondition = Object.assign(
            {}, this.searchCondition, {pageSize: pagination.pageSize, pageNum: pagination.current})
        this.search()
    };


    render() {
        return <Modal title="日志列表"
                      destroyOnClose={true}
                      visible={this.state.visible}
                      onCancel={this.handleCancel}
                      footer={null}
                      width={1360}
        >
            <div className="site-layout-background" style={{padding: 24, minHeight: 380}}>
                <Card>
                    <Row style={{marginBottom: 20}}>
                        <Input placeholder="请输入执行类名" style={{width: 200, marginRight: 12}}
                               onChange={this.jobClassNameChanged} value={this.state.searchCondition.jobClassName}/>
                        <Select placeholder="请选择状态" style={{width: 120}} onChange={this.statusChanged}
                                value={this.state.searchCondition.status}>
                            <Option value="0">成功</Option>
                            <Option value="1">失败</Option>
                        </Select>
                        <Button type="primary" style={{marginRight: 12,marginLeft:12}} onClick={this.search}>搜索</Button>
                        <Button type="primary" style={{marginRight: 12}} onClick={this.reset}>重置</Button>
                    </Row>
                    <Row>
                        <Col span={24}>
                            <Table dataSource={this.state.logList} columns={this.columns} rowKey="id"
                                   pagination={this.state.pagination} onChange={this.handleTableChange}/>
                        </Col>
                    </Row>
                </Card>
            </div>
        </Modal>
    }
}

export default JobLogList